import React from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, TextInput, Image, Text } from 'react-native'
import { commonStyle, definedColors, translateSize } from 'styles'
import assets from '../assets'
import { RadiusButton, TradeDetailItem, ShortBar, Toast } from 'components'
import { cancelOrderDetailStyle } from './styles'
import pos, { PosGetInOutput } from 'api/pos';
import { PosModule } from 'native-modules';
import { PayResult } from 'api/PayResult';
import { PosAppGetinIuput } from 'api/pos';

const CancelOrderDetailScreen: NavigationStackScreenComponent<{ posGetin: PosGetInOutput }> = props => {
	// 银联的调用不能并发
	let ylFlag = false
	return (
		<View style={[commonStyle.containerColumn, cancelOrderDetailStyle.container]}>
			<View style={[commonStyle.containerColumn, cancelOrderDetailStyle.contentContainer]}>
				<View style={[commonStyle.containerRow, cancelOrderDetailStyle.inputContainer]}>
					<Image style={cancelOrderDetailStyle.inputIcon} source={assets.images.icon_search} />
					<TextInput
						style={cancelOrderDetailStyle.input}
						returnKeyType="done"
						onChangeText={() => { }}
						onSubmitEditing={value => { }}
					/>
				</View>
				<ShortBar title="交易金额" />
				<Text style={commonStyle.amountStyle}>{props.navigation.getParam('posGetin').posGetIn.amount} </Text>
			</View>
			<TradeDetailItem hideDivier={true} showBank={false} posGetin={props.navigation.getParam('posGetin')} />
			<View style={cancelOrderDetailStyle.confirmBtn}>
				<RadiusButton
					style={{ backgroundColor: definedColors.firebrick }}
					onPress={() => {
						if (ylFlag) return
						ylFlag = true
						// 校验是否允许撤销
						pos.posApp.beforeCancelPay({ id: props.navigation.getParam('posGetin').posGetIn.id }).then(res => {
							if (res.result) {
								PosModule.cancelOrderHj(props.navigation.getParam('posGetin').posGetIn.payMode === 'scan', props.navigation.getParam('posGetin').posGetIn.traceNo).then(result => {
									console.log(result)
									let payResult = JSON.parse(result) as PayResult
									if (payResult.resultCode !== "0") {
										Toast.show(`撤销失败！${payResult.resultCode}:${payResult.resultMsg}`)
										ylFlag = false
									} else {
										let posAppGetin = { ...props.navigation.getParam('posGetin').posGetIn, bankCancelInfo: result } as PosAppGetinIuput
										pos.posApp.cancelPay(posAppGetin).then(res => {
											props.navigation.replace('CancelResult')
										}).finally(() => {
											ylFlag = false
										})
									}
								})
									.catch(err => {
										console.log(err)
										Toast.show(`撤销失败！${err}`)
										ylFlag = false
										// let posAppGetin = { ...props.navigation.getParam('posGetin').posGetIn, bankCancelInfo: JSON.stringify({}) } as PosAppGetinIuput
										// pos.posApp.cancelPay(posAppGetin).then(res => {
										// 	props.navigation.replace('CancelResult')
										// })
									})
							} else {
								Toast.show(res.msg || '不允许撤单，请检查单据在sap中的状态！')
								ylFlag = false
							}

						}).catch(err => {
							Toast.show(`撤销失败！${err}`)
							ylFlag = false
						})


					}}>
					<Text style={cancelOrderDetailStyle.confirmTitle}>确定撤销付款</Text>
				</RadiusButton>
			</View>
		</View>
	)
}

CancelOrderDetailScreen.navigationOptions = props => {
	return {
		title: '交易明细',
	}
}

export default CancelOrderDetailScreen
